

<!DOCTYPE html>

<html>

  <!-- Copyright (C) 2012 Protek LTD. -->



// Build 1.0 has 

  <head>

    <title>Main Layout</title>



    <meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

    <style type="text/css">

      body,html

      {

          height: 100%;

          margin: 0;

          padding: 0;

          color: black;

      }



      #container

      {

          width: 100%;

          height: 100%;

          overflow: auto;

          background: blue;

      }



      #container canvas {

          vertical-align: top;

          display: block;

          overflow: auto;

      }



      #fix {

          background: yellow;

          height: 20px;

          text-align: center;

      }

    </style>

  </head>

  <body>

    <div id="container">

      <canvas id="canvas">

        HTML5 Canvas not supported.

      </canvas>

      <div id="fix">
      <button id="btnInit" >Monitor my location</button>

      <button id="btnStop" >Stop monitoring</button>
    </div>
    <div id="info"></div>

    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript"> 
// ***********************
jQuery(window).ready(function(){
            jQuery("#btnInit").click(initiate_watchlocation);
            jQuery("#btnStop").click(stop_watchlocation);
        });

        var watchProcess = true;

        function initiate_watchlocation() {
    if (watchProcess) {
        watchProcess = navigator.geolocation.watchPosition(handle_geolocation_query, handle_errors);
    }
}

        function stop_watchlocation() {
    if (watchProcess != null)
    {
        navigator.geolocation.clearWatch(watchProcess);
        watchProcess = null;
    }
}

        function handle_errors(error)
        {
            switch(error.code)
            {
                case error.PERMISSION_DENIED: alert("user did not share geolocation data");
                break;

                case error.POSITION_UNAVAILABLE: alert("could not detect current position");
                break;

                case error.TIMEOUT: alert("retrieving position timedout");
                break;

                default: alert("unknown error");
                break;
            }
        }

        function handle_geolocation_query(position) {
    var text = "Latitude: "  + position.coords.latitude  + "<br/>" +
               "Longitude: " + position.coords.longitude + "<br/>" +
               "Accuracy: "  + position.coords.accuracy  + "m<br/>" +
               "Time: " + new Date(position.timestamp);
    jQuery("#info").html(text);

    var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + ',' + position.coords.longitude +
                    "&zoom=14&size=300x400&markers=color:blue|label:S|" + position.coords.latitude + ',' + position.coords.longitude;

    jQuery("#map").remove();
    jQuery(document.body).append(
        jQuery(document.createElement("img")).attr("src", image_url).attr('id','map')
    );

}


//**************************
      $(function() { // document ready, resize container



          var canvas = document.getElementById("canvas");

          var ctx = canvas.getContext("2d");

          

          var rc = 0;  // resize counter

          var oc = 0;  // orientiation counter

          var ios = navigator.userAgent.match(/(iPhone)|(iPod)/); // is iPhone

          

          function orientationChange() {

              // inc orientation counter

              oc++;

          }

          function resizeCanvas() {

              // inc resize counter

              rc++;



              if (ios) {

                  // increase height to get rid off ios address bar

                  $("#container").height($(window).height() + 60)

              }

              

              var width = $("#container").width();

              var height = $("#container").height();

              

              cheight = height - 20; // subtract the fix height

              cwidth = width;

              

              // set canvas width and height

              $("#canvas").attr('width', cwidth);

              $("#canvas").attr('height', cheight);



              // hides the WebKit url bar

              if (ios) {

                  setTimeout(function() {

                      window.scrollTo(0, 1);

                  }, 100);   

              }

              ctx.fillStyle = 'green';

              ctx.fillRect(0, 0, cwidth, cheight);

              ctx.fillStyle = 'black';

              ctx.fillRect(10, 10, cwidth - 20, cheight - 20)



              // write number of orientation changes and resize events

              ctx.fillStyle = 'white';

              ctx.textAlign = 'center';

              ctx.fillText("info", cwidth/2, cheight/2);

              ctx.fillText('Resize events: '+rc, cwidth/2, cheight/2 + 10);

          }



          var resizeTimeout;

          $(window).resize(function() {

              clearTimeout(resizeTimeout);

              resizeTimeout = setTimeout(resizeCanvas, 100);

          });

          resizeCanvas();

          

          var otimeout;

          window.onorientationchange = function() {

              clearTimeout(otimeout);

              otimeout = setTimeout(orientationChange, 50);

          }           

// EMBEDDED GEOLOCATION CODE 

function handle_geolocation_query(position) {
    var text = "Latitude: "  + position.coords.latitude  + "<br/>" +
               "Longitude: " + position.coords.longitude + "<br/>" +
               "Accuracy: "  + position.coords.accuracy  + "m<br/>" +
               "Time: " + new Date(position.timestamp);
    jQuery("#info").html(text);
    var image_url = new Image();
    var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + ',' + position.coords.longitude +
                    "&zoom=14&size=300x400&markers=color:blue|label:S|" + position.coords.latitude + ',' + position.coords.longitude;

    jQuery("#map").remove();

    image_url.onload = function (){ 
          ctx.drawImage(image_url, 69, 50); };

    jQuery(document.body).append(
        jQuery(document.createElement("img")).attr("src", image_url).attr('id','map'));
}
// UPLOAD MAP IMAGE ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^






// UPLOAD DARTH HERE
// var imageObj = new Image();
// imageObj.onload = function (){ 
//            ctx.drawImage(imageObj, 69, 50);
//          };

//         imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
// UPLOAD DARTH HERE        


      } // Canvas resizing function ends here 

// UNALTERED GEOLOCATION CODE 
// function handle_geolocation_query(position) {
//     var text = "Latitude: "  + position.coords.latitude  + "<br/>" +
//                "Longitude: " + position.coords.longitude + "<br/>" +
//                "Accuracy: "  + position.coords.accuracy  + "m<br/>" +
//                "Time: " + new Date(position.timestamp);
//     jQuery("#info").html(text);
// var image_url = new Image();
//     var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + ',' + position.coords.longitude +
//                     "&zoom=14&size=300x400&markers=color:blue|label:S|" + position.coords.latitude + ',' + position.coords.longitude;
// image_url.onload = function (){ 
//           ctx.drawImage(image_url, 69, 50);
//         };
//     jQuery("#map").remove();
//     jQuery(document.body).append(
//         jQuery(document.createElement("img")).attr("src", image_url).attr('id','map')
//     );
// }
//UNALTERED GEOLOCATION CODE








    );

    </script>

  </body>

</html>